<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: aqua"> {{ name }} </el-header>
      <el-container style="height: 660px">
        <el-aside width="200px" style="background-color: blanchedalmond">
          <ul class="aside">
            <li><router-link to="/aaa">查询</router-link></li>
          </ul>
        </el-aside>
        <el-main style="background-color: brown">
          <!-- Main -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <!-- <el-input
                v-model="formInline.numbers"
                placeholder="楼宇"
                clearable
              /> -->
              <el-select
                v-model="formInline.numbers"
                placeholder="楼号"
                @change="changeUnti"
              >
                <el-option
                  v-for="number in formInline.numbers"
                  :label="number"
                  :value="number"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <!-- <el-input
                v-model="formInline.units"
                placeholder="单元"
                clearable
              /> -->
              <el-select v-model="formInline.units" placeholder="单元">
                <el-option
                  v-for="units in formInline.units"
                  :label="units"
                  :value="units"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="formInline.remarks"
                placeholder="备注"
                clearable
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
              <el-button type="primary" @click="insertBuilding">添加</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="buildingObj.table" style="width: 100%">
            <el-table-column label="序号" prop="id" />
            <el-table-column label="楼栋" prop="numbers" />
            <el-table-column label="单元" prop="units" />
            <el-table-column label="备注" prop="remarks" />
            <el-table-column align="right">
              <template #default="scope">
                <el-button
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 弹框 -->
          <el-dialog
            v-model="dialog.dialogFormVisible"
            :title="dialog.dialogTitle"
            width="400px"
          >
            <el-form :model="editForm" label-width="80px">
              <el-form-item label="楼栋">
                <el-input v-model="editForm.numbers" placeholder="请输入楼栋" />
              </el-form-item>
              <el-form-item label="单元">
                <el-input v-model="editForm.units" placeholder="请输入单元" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="editForm.remarks" placeholder="请输入备注" />
              </el-form-item>
            </el-form>
            <template #footer>
              <el-button @click="dialog.dialogFormVisible = false;">取消</el-button>
              <el-button type="primary" @click="saveEdit">保存</el-button>
            </template>
          </el-dialog>

          <el-pagination
            background
            layout="prev, pager, next"
            style="margin: 10px"
            v-model:page-size="buildingPage.pageSize"
            :total="buildingPage.pagetotal"
            v-model:current-page="buildingPage.pageNumber"
            @current-change="queryCondition"
          />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, onMounted } from "vue";
import axios from "axios";
import { useCounterStore } from "../stores/counter";

const store = useCounterStore();
const name = ref(store.username);

const dialog = reactive({
  dialogFormVisible: false,
  dialogTitle: "",
});

const formInline = reactive({
  numbers: "",
  units: "",
  remarks: "",
});


const editForm = reactive({
  id: 0,
  numbers: "",
  units: "",
  remarks: "",
});
//点击添加
const insertBuilding = async () => {
  editForm.numbers="";
  editForm.units="";
  editForm.remarks="";
 
  dialog.dialogTitle = "添加";
  dialog.dialogFormVisible = true;
  console.log(editForm);
};

//点击编辑
const handleEdit = (index, row) => {
  // 填充当前行数据到表单（注意：必须包含 id，用于 PUT 请求）
  editForm.id = row.id;
  editForm.numbers = row.numbers;
  editForm.units = row.units;
  editForm.remarks = row.remarks;

  dialog.dialogTitle = "编辑";
  dialog.dialogFormVisible = true;
};


//执行添加或者编辑方法
const saveEdit = async () => {
  if (dialog.dialogTitle == "编辑") {
    await axios.put(
      `http://localhost:8080/api/b1/building/${editForm.id}`,
      editForm
    );
  } else {
    
    await axios
      .post(`http://localhost:8080/api/b1/building`, editForm)
  }
    dialog.dialogFormVisible = false;
  // 刷新当前页数据
  await queryCondition(buildingPage.pageNumber);
};

const onSubmit = async () => {
  await queryCondition(buildingPage.pageNumber);
};

const handleDelete = async (index, row) => {
  // console.log(index, row);
  let num = row.id;
  await axios
    .delete(`http://localhost:8080/api/b1/building/${num}`)
    .then((res) => {
      queryCondition(buildingPage.pageNumber);
    });
};

const buildingPage = reactive({
  pageNumber: 0,
  pageSize: 5,
  pagetotal: 0,
});
const buildingObj = reactive({
  table: [],
});

// 查询楼号后去单元修改
const changeUnti = async () => {
  await axios
    .get(
      `http://localhost:8080/api/b1/building/numbers/select/${formInline.numbers}`
    )
    .then((res) => {
      // console.log(res.data.data);
      formInline.units = res.data.data;
    });
};

// 查询楼号
const queryNumber = async () => {
  await axios
    .get(`http://localhost:8080/api/b1/building/numbers`)
    .then((res) => {
      // console.log(res.data.data);
      formInline.numbers = res.data.data;
    });
};

const queryCondition = async (currentPage: number) => {
  buildingPage.pageNumber = currentPage;
  await axios
    .get(
      `http://localhost:8080/api/b1/building/${buildingPage.pageNumber}/${buildingPage.pageSize}`,
      { params: formInline }
    )
    .then((res) => {
      // console.log(res.data);
      buildingObj.table = res.data.data.list;
      buildingPage.pageNumber = res.data.data.pageNum;
      buildingPage.pageSize = res.data.data.pageSize;
      buildingPage.pagetotal = res.data.data.total;
    });
};

onMounted(async () => {
  queryCondition(1);
  queryNumber();
});
</script>

<style>
.aside {
  list-style-type: none;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>


